<template>
  <div>
    <dialog-diy ref="dialogDiy" :titleCenter="true" title="订单详情">
      <div
        v-loading="loading"
        style="padding: 20px; height: 70vh; overflow-y: auto"
      >
        <div class="msg-main">
          <div class="msg-title">订单信息</div>
          <div class="msg-content">
            <div class="fx">
              <div class="block f5bg">
                <div class="block-left">订单编号：</div>
                <div
                  class="block-right"
                  v-html-no="{ action: detailInfo.orderNo }"
                ></div>
              </div>
              <div class="block f5bg">
                <div class="block-left">授信金额(元)：</div>
                <div
                  class="block-right"
                  v-html-no="{ action: detailInfo.creditMoney }"
                ></div>
              </div>
            </div>
            <div class="fx">
              <div class="block">
                <div class="block-left">下单时间：</div>
                <div
                  class="block-right"
                  v-html-no="{ action: detailInfo.createTime }"
                ></div>
              </div>
              <div class="block">
                <div class="block-left">放款金额(元)：</div>
                <div
                  class="block-right"
                  v-html-no="{ action: detailInfo.loanMoney }"
                ></div>
              </div>
            </div>
            <div class="fx">
              <div class="block f5bg">
                <div class="block-left">产品名称：</div>
                <router-link
                  :to="{ path: '/productDetail', query: { id: detailInfo.id } }"
                >
                  <el-button
                    type="text"
                    size="small"
                    v-html-no="{ action: detailInfo.productName }"
                  >
                  </el-button>
                </router-link>
              </div>
              <div class="block f5bg">
                <div class="block-left">订单进度：</div>
                <div
                  class="block-right"
                  v-html-no="{ action: detailInfo.state }"
                ></div>
              </div>
            </div>
            <div class="fx">
              <div class="block">
                <div class="block-left">所属渠道：</div>
                <div
                  class="block-right"
                  v-html-no="{ action: detailInfo.channelId }"
                ></div>
              </div>
              <div class="block">
                <div class="block-left">订单状态：</div>
                <div
                  class="block-right"
                  v-html-no="{ action: detailInfo.ksrState }"
                ></div>
              </div>
            </div>
            <div class="fx">
              <div class="block f5bg">
                <div class="block-left">第三方订单号：</div>
                <div
                  class="block-right"
                  v-html-no="{ action: detailInfo.channelOrderNo }"
                ></div>
              </div>
            </div>
          </div>
        </div>
        <div class="msg-main">
          <div class="msg-title">客户信息</div>
          <div class="msg-content">
            <div class="fx">
              <div class="block f5bg">
                <div class="block-left">公司名称：</div>
                <div
                  class="block-right"
                  v-html-no="{ action: detailInfo.companyName }"
                ></div>
              </div>
              <div class="block f5bg">
                <div class="block-left">申请人身份：</div>
                <div
                  class="block-right"
                  v-html-no="{
                    action: `  ${
                      detailInfo.applyType
                        ? `${detailInfo.applyType == 'LEGAL' ? '法人' : '股东'}`
                        : '-'
                    }  `,
                  }"
                ></div>
              </div>
            </div>
            <div class="fx">
              <div class="block">
                <div class="block-left">申请人姓名：</div>
                <div
                  class="block-right"
                  v-html-no="{ action: detailInfo.name }"
                ></div>
              </div>
              <div class="block">
                <div class="block-left">申请人手机：</div>
                <div
                  class="block-right"
                  v-html-no="{ action: detailInfo.phone }"
                ></div>
              </div>
            </div>
            <div class="fx">
              <div class="block f5bg">
                <div class="block-left">申请人身份证：</div>
                <div
                  class="block-right"
                  v-html-no="{ action: detailInfo.idCard }"
                ></div>
              </div>
              <div class="block f5bg">
                <div class="block-left">申请城市：</div>
                <div
                  class="block-right"
                  v-html-no="{ action: detailInfo.wholeName }"
                ></div>
              </div>
            </div>
            <div class="fx">
              <div class="block">
                <div class="block-left">申请期限：</div>
                <div
                  class="block-right"
                  v-html-no="{ action: detailInfo.applyTerm, unit: '期' }"
                ></div>
              </div>
              <div class="block">
                <div class="block-left">申请金额：</div>
                <div
                  class="block-right"
                  v-html-no="{ action: detailInfo.applyAmount }"
                ></div>
              </div>
            </div>
          </div>
        </div>
        <div class="msg-main">
          <div class="msg-title">佣金结算</div>
          <div class="msg-content">
            <div class="fx">
              <div class="block f5bg">
                <div class="block-left">结算金额(元)：</div>
                <div
                  class="block-right"
                  v-html-no="{ action: detailInfo.money }"
                ></div>
              </div>
              <div class="block f5bg">
                <div class="block-left">所属客户经理：</div>
                <div
                  class="block-right"
                  v-html-no="{ action: detailInfo.accountManagerName }"
                ></div>
              </div>
            </div>
            <div class="fx">
              <div class="block">
                <div class="block-left">返佣金额：</div>
                <div class="block-right">-</div>
              </div>
              <div class="block">
                <div class="block-left">预计返佣时间：</div>
                <div class="block-right">
                  {{ detailInfo.createTime | timeFilter }}
                </div>
              </div>
            </div>
            <div class="fx">
              <div class="block f5bg">
                <div class="block-left">返佣状态：</div>
                <div
                  class="block-right"
                  v-html-no="{ action: detailInfo.ksrSettleState }"
                ></div>
              </div>
              <div class="block f5bg">
                <div class="block-left">实际返佣时间：</div>
                <div class="block-right">-</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </dialog-diy>
  </div>
</template>
<script>
import dialogDiy from "../../../../components/dialogDiy/index.vue";
import { getkeyikeDetail } from "../../../../api/incomingManagement";
export default {
  filters: {
    timeFilter(time) {
      const initialDate = new Date(time);
      const oneMonthLater = new Date(initialDate);
      oneMonthLater.setMonth(initialDate.getMonth() + 1);
      const year = oneMonthLater.getFullYear();
      const month = String(oneMonthLater.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以需要加1
      const day = String(oneMonthLater.getDate()).padStart(2, "0");
      const hours = String(oneMonthLater.getHours()).padStart(2, "0");
      const minutes = String(oneMonthLater.getMinutes()).padStart(2, "0");
      const seconds = String(oneMonthLater.getSeconds()).padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
  },
  name: "detail",
  components: {
    dialogDiy,
  },
  data() {
    return {
      detailInfo: {},
      product_channelList: [],
      loading: false,
    };
  },
  async created() {
    this.product_channelList = await this.$getDictData("product_channel");
  },
  methods: {
    datafun(type, val) {
      let arr = [];
      if (type === "channelId") {
        arr = this.product_channelList;
      }
      let str = [];
      val.forEach((v) => {
        arr.forEach((v1) => {
          if (v === v1.value) {
            str.push(v1.label);
          }
        });
      });
      return str.join(",");
    },
    opendialog(v) {
      this.loading = true;
      getkeyikeDetail(v.orderNo)
        .then((res) => {
          res.data.channelId = this.datafun("channelId", [res.data.channelId]);
          this.detailInfo = res.data;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
      this.$refs.dialogDiy.openlog();
    },
  },
};
</script>

<style scoped lang="scss">
.msg-main {
  .msg-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 10px;
    color: #222;
  }
  .msg-content {
    .f5bg {
      background: #f5f5f5;
    }
    .fx {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      .block {
        width: 48%;
        display: flex;
        align-items: center;
        max-height: 60px;
        padding: 18px 0;

        //line-height: 56px;
        .block-left {
          display: inline-block;
          //display: flex;
          text-align: right;
          width: 38%;
          white-space: nowrap;
          color: #999;
        }
        .block-right {
          display: inline-block;
          //display: flex;
          line-height: 18px;
          color: #222;
          width: 60%;
        }
      }
    }
  }
}
</style>
